<template>
  <!-- 这里是你的页面代码。 -->
  <view class="statusView" :style="{ background: statusOptions.BackColor }">
    <template v-if="props.status === 'success' || props.status === 'payed'">
      <image
        src="@/static/public/success.png"
        :style="{ width: '30rpx', height: '30rpx' }"
      ></image>
    </template>
    <template v-if="props.status === 'warring'" class="statusImg">
      <image
        src="@/static/public/loading_time.png"
        :style="{ width: '30rpx', height: '30rpx' }"
      ></image>
    </template>
    <template v-if="props.status === 'fail'" class="statusImg">
      <image
        src="@/static/public/error.png"
        :style="{ width: '30rpx', height: '30rpx' }"
      ></image>
    </template>
    <text style="color: #ffffff; margin-left: 10px; font-size: 14px">
      {{ props.statusFont }}
    </text>
  </view>
</template>

<script lang="ts" setup>
import {
  withDefaults,
  defineProps,
  defineEmits,
  watch,
  onMounted,
  ref,
} from "vue";
const props = withDefaults(defineProps<componentsProps>(), {
  statusFont: "默认提示字体",
});
const emits = defineEmits(["click"]);
/**@data */
const statusOptions = ref({
  BackColor: "#fddb78",
});
//你的代码...
interface componentsProps {
  status: string;
  statusFont?: string;
  background?: string;
}
/**@description 转变状态条 */
onMounted(() => {
  switch (props.status) {
    case "success":
      statusOptions.value.BackColor = "#43b74a";
      break;
    case "payed":
      statusOptions.value.BackColor = "#50d7bf";
      break;
    case "warring":
      statusOptions.value.BackColor = "#fddb78";
      break;
    case "fail":
      statusOptions.value.BackColor = "#9e2496";
      break;
    default:
      break;
  }
});
const a111 = new Map
</script>

<style lang="scss" scoped>
@import "index";
</style>
